<template>
  <div class="home">
    <h1>{{type}}:{{count}}</h1>
    <!-- <h2>{{ccc}}</h2> -->
    <button @click='add'>+</button>
    <button @click='minus'>-</button>
    {{name}}
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
    return {
      // ccc:this.$store.state.count
    }
  },
  methods: {
    add(){
      this.$store.commit('aaa/changeCount',10)
      // this.changeCount(10)
      // this.changeCountAsync(10)
      this.$store.commit('aaa/changeName',8888)
    },
    minus(){
      // this.$store.commit('changeCount',-5)
      // this.changeCount(-5)
      this.changeCountAsync(-5)
    },
    ...mapMutations(['CHANGE_COUNT']),
    ...mapActions(['changeCountAsync'])
  },
  computed: {
    // count(){
    //   return this.$store.state.count
    // }
    ...mapState(['count']),
    ...mapGetters(['type']),
    name(){
      return this.$store.state.aaa.name
    }
  },
  created() {
    console.log(this)
  },
}
</script>
